<template>
  <div class="call-container">
    <div class="call-form">
      <el-card class="w-full h-full p-4">
        <template #header>
          <h1 class="m-0 text-lg">{{ workerName }}</h1>
        </template>
        <template #default>
          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="工序" prop="processId">
              <el-select
                v-model="formData.processId"
                placeholder="请选择工序"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="process in processLists"
                  :label="process.processName"
                  :value="process.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="呼叫类型" prop="calltypeId">
              <calltypeList
                :calltypeList="calltypeLists"
                :calltypeId="formData.calltypeId"
                @selectCall="(value) => changeCallType(value)"
              ></calltypeList>
            </el-form-item>

            <el-form-item label="设备" prop="equipmentId">
              <el-select
                v-model="formData.equipmentId"
                placeholder="请选择设备"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="equipment in equipmentLists"
                  :label="equipment.equipmentName"
                  :value="equipment.id"
              /></el-select>
            </el-form-item>

            <el-form-item
              v-if="stopTypeLists.length > 0"
              label="停机类型"
              prop="stopTypeId"
            >
              <el-select
                v-model="formData.stopTypeId"
                placeholder="请选择停机类型"
                @change="selectStopType"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="stopType in stopTypeLists"
                  :label="stopType.stopTypeName"
                  :value="stopType.id"
              /></el-select>
            </el-form-item>

            <el-form-item
              v-if="stopReasonLists.length > 0"
              label="停机原因"
              prop="stopReasonId"
            >
              <el-select
                v-model="formData.stopReasonId"
                placeholder="请选择停机原因"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="stopReason in stopReasonLists"
                  :label="stopReason.stopReasonName"
                  :value="stopReason.id"
              /></el-select>
            </el-form-item>

            <el-form-item
              v-if="andinspectionLists.length > 0"
              label="报检类型"
              prop="andinspectionId"
            >
              <el-select
                v-model="formData.andinspectionId"
                placeholder="请选择报检类型"
                clearable
                class="w-full"
              >
                <el-option
                  v-for="andinspection in andinspectionLists"
                  :label="andinspection.inspectionTypeName"
                  :value="andinspection.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="图片上传" prop="">
              <el-upload
                v-model:file-list="fileList"
                class="pic-upload"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="getImages"
                accept="image/png, image/jpg , image/gif"
              >
                <template #file="{ file }">
                  <div>
                    <el-image
                      class="w-full h-full rounded-10px"
                      :src="file.url"
                      :preview-src-list="imgaeLists"
                      preview-teleported
                      fit="cover"
                    />
                    <label
                      class="upload-list-delete"
                      @click="handleRemove(file)"
                      ><el-icon><i-ep-close /></el-icon
                    ></label>
                  </div>
                </template>
                <template #default>
                  <el-icon class="uploader-icon"><i-ep-camera /></el-icon>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label-width="0" class="fixed bottom-10">
              <el-button class="call btn" @click="submitData">呼叫</el-button>
              <el-button class="work btn" @click="resumptionWork"
                >复工</el-button
              >
            </el-form-item>
          </el-form>
        </template>
      </el-card>
    </div>
    <div class="h-full">
      <h1 class="m-0 text-lg">呼叫记录</h1>
      <div class="flex flex-col gap-16px call-scroll overflow-y-scroll h-670px">
        <recordCard
          v-for="item in pageDataList"
          :key="item.id"
          :recordItem="item"
          @refresh="getCallDataListByPage"
        ></recordCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getUserWokers,
  getUserWoker,
  getMesprocessList,
  getAndstoptypeList,
  getAndstopreasonList,
  getAndinspectiontypeList,
  saveAndcall,
  getCrewEquipmentList,
  queryCallTypeForPlant,
  getCallListByPage,
  updateCallState,
  resumptionCallWork,
  getinfo,
} from "@/api/andon/andon.ts";
import { ElMessage } from "element-plus";
import request from "@/utils/request";
//表单实例
const formRef = ref(ElForm);
//校验规则
const rules = reactive({
  processId: [{ required: true, message: "请输入工序", trigger: "change" }],
  calltypeId: [
    { required: true, message: "请输入呼叫类型", trigger: "change" },
  ],
  equipmentId: [{ required: true, message: "请输入设备", trigger: "change" }],
  andinspectionId: [
    { required: true, message: "请输入报检类型", trigger: "change" },
  ],
  stopReasonId: [
    { required: true, message: "请输入停机原因", trigger: "change" },
  ],
  stopTypeId: [
    { required: true, message: "请输入停机类型", trigger: "change" },
  ],
});
//表单数据
let formData = reactive({
  processId: "",
  calltypeId: "",
  equipmentId: "",
  andinspectionId: "",
  stopReasonId: "",
  stopTypeId: "",
  remarks: "",
});
//文件列表
const fileList = ref([]);
const imgaeLists = ref([]);
const uploadApi = import.meta.env.VITE_APP_BASE_API;
console.log(uploadApi);
// 上传文件请求
const uploadImages = async (file) => {
  const { data } = await request({
    url: `/system/fileCenter/uploadFile/andon`,
    method: "post",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    data: {
      file: file.raw,
    },
  });
  console.log(data);
  return data.fileName;
};
const getImages = async (file) => {
  const fileName = await uploadImages(file);
  const url = `${uploadApi}/system/fileCenter/preview/andon/${fileName}`;
  imgaeLists.value.push(url);
  file.readUrl = url;
};
// 删除预览文件
const handleRemove = (file) => {
  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
  imgaeLists.value = imgaeLists.value.filter((url) => url !== file.readUrl);
};

// 工作中心
const workerName = ref();
const getWorkName = async () => {
  const { data } = await getUserWoker();
  workerName.value = data.workshopCode + "-" + data.workshopName;
};

// 工序列表
const processLists = ref([]);
const getProcessLists = async () => {
  const { data } = await getUserWoker();
  processLists.value = data.processList;
};

// 呼叫类型列表
const calltypeLists = ref([]);
const getCalltypeLists = async () => {
  const { data } = await queryCallTypeForPlant();
  calltypeLists.value = data;
};
const changeCallType = (value) => {
  formData.calltypeId = value;
  console.log(formRef.value.validateField("calltypeId"));
  stopTypeLists.value = [];
  stopReasonLists.value = [];
  andinspectionLists.value = [];
  formData.stopTypeId = "";
  formData.stopReasonId = "";
  formData.andinspectionId = "";
  getStopTypeLists();
};

// 设备列表
const equipmentLists = ref([]);
const getEquipmentLists = async () => {
  const { data } = await getCrewEquipmentList();
  equipmentLists.value = data;
};

// 报检类型列表
const andinspectionLists = ref([]);
const getAndinspectionLists = async (id) => {
  const { data } = await getAndinspectiontypeList({
    stopType: id,
    enabled: 1,
  });
  andinspectionLists.value = data;
};

// 停机类型列表
const stopTypeLists = ref([]);
const getStopTypeLists = async () => {
  const { data } = await getAndstoptypeList({
    callTypeId: formData.calltypeId,
    enabled: 1,
  });
  stopTypeLists.value = data;
};
const selectStopType = (id) => {
  stopReasonLists.value = [];
  andinspectionLists.value = [];
  formData.stopReasonId = "";
  formData.andinspectionId = "";
  if (id) {
    getStopReasonLists(id);
    getAndinspectionLists(id);
  }
};

// 停机原因列表
const stopReasonLists = ref([]);
const getStopReasonLists = async (id) => {
  const { data } = await getAndstopreasonList({
    stopType: id,
    enabled: 1,
  });
  stopReasonLists.value = data;
};

//呼叫
const submitData = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let saveData = {
        workCenterId: "",
        processId: formData.processId,
        stopId: formData.stopTypeId,
        equipmentId: formData.equipmentId,
        stopReasonId: formData.stopReasonId,
        inspectionTypeId: formData.andinspectionId,
        imgaes: imgaeLists.value,
        callTypeId: formData.calltypeId,
        remarks: "",
      };
      await saveAndcall(saveData);
      ElMessage({
        type: "success",
        message: "操作成功",
      });
      resetForm();
      await getCallDataListByPage();
    }
  });
};

//复工
const resumptionWork = async () => {
  await resumptionCallWork();
  ElMessage({
    type: "success",
    message: "操作成功",
  });
  resetForm();
};

const pageDataList = ref([]);
const searchPageData = reactive({
  current: 1,
  size: 20,
  data: {},
});
// 查询呼叫记录
const getCallDataListByPage = async () => {
  const { data } = await getCallListByPage(searchPageData);
  pageDataList.value = [];
  pageDataList.value = data;
};

// 重置
const resetForm = async () => {
  formRef.value.resetFields();
  imgaeLists.value = [];
  fileList.value = [];
  formData.andinspectionId = "";
  formData.stopReasonId = "";
  formData.stopTypeId = "";
  formData.equipmentId = "";
  formData.processId = "";
  formData.calltypeId = "";
  formData.stopReasonId = "";
  formData.andinspectionId = "";
  formData.remarks = "";
  formData.workCenterId = "";
  formData.stopReasonId = "";
  formData.stopTypeId = "";
  formData.equipmentId = "";
  stopTypeLists.value = [];
  stopReasonLists.value = [];
  andinspectionLists.value = [];
};

onMounted(async () => {
  await Promise.all([
    getCalltypeLists(),
    getProcessLists(),
    getEquipmentLists(),
    getCallDataListByPage(),
    getWorkName(),
  ]);
});
</script>

<style scoped lang="scss">
$call-btn-color: #000a7b;
$work-btn-color: #ffa905;

.call-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 10px;
  height: 100%;
  width: 100%;
  padding: 10px;
  .call-form {
    position: relative;
    .btn {
      width: 150px;
      height: 40px;
      margin-right: 20px;
      border-radius: 10px;
      font-size: 16px;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    .call {
      background-color: $call-btn-color;
    }
    .work {
      background-color: $work-btn-color;
    }
    .pic-upload {
      position: relative;
      overflow: scroll;
      height: 220px;
      .upload-list-delete {
        position: absolute;
        top: -9px;
        right: -19px;
        color: #fff;
        background-color: #67c23a;
        transform: rotate(45deg);
        border: none;
        text-align: center;
        width: 46px;
        height: 26px;
        .el-icon {
          margin-top: 12px;
          transform: rotate(-45deg);
        }
      }
    }
  }
  .call-scroll {
    // /* 滚动条整体样式 */
    // &::-webkit-scrollbar {
    //   width: 12px;
    //   height: 12px;
    // }

    // /* 滚动条轨道 */
    // &::-webkit-scrollbar-track {
    //   background-color: #e6e6e6;
    // }

    // /* 滚动条滑块 */
    // &::-webkit-scrollbar-thumb {
    //   background-color: #16254e;
    //   border-radius: 0;
    // }

    // /* 滚动条上下按钮 */
    // &::-webkit-scrollbar-button {
    //   display: block;
    // }
  }
}
:deep(.el-card__header) {
  border-bottom: none;
  padding-bottom: 0;
}
:deep(.el-upload--picture-card) {
  border: 1px solid #ccc;
  height: 100px;
  background-color: transparent;
}
:deep(.el-upload-list__item) {
  height: 100px;
}
:deep(.el-icon.uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
:deep(.el-upload--picture-card) {
  border-radius: 10px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  border: none;
}
// :deep(.el-image__inner) {
//   object-fit: cover;
// }
</style>
